<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>十进制转化为二进制</title>
  <style media="screen">
    input{
      position: relative;;
      top: -50px;
      margin: 0 10px;
    }
  </style>
</head>
<body>
  <div class="">
    <textarea name="text" id="text1" rows="8" cols="20"></textarea>
    <input type="button" id="changeTwo" name="btn1" value="转化为二进制">
    <textarea name="toText" id="text2" rows="8" cols="20"></textarea>
    <input type="button" id="hash" name="btn2" value="加密">
    <textarea name="MD5Text" id="text3" rows="8" cols="20"></textarea>
    <input type="button" id="realve" name="btn3" value="二进制转化为字符">
    <textarea name="jiemi" id="text4" rows="8" cols="20"></textarea>
  </div>

  <script src="jquery.md5.js"></script>
  <script type="text/javascript">
    window.onload=function(){
      var oBtn1=document.getElementById('changeTwo');
      var oBtn2=document.getElementById('hash');
      var oBtn3=document.getElementById('realve');
      var oText1=document.getElementById('text1');
      var oText2=document.getElementById('text2');
      var oText3=document.getElementById('text3');
      var oText4=document.getElementById('text4');
      oBtn1.onclick=function(){
        var text1=oText1.value;
        // console.log('编码前:'+ text1);
        var total2str = "";
        for (var i = 0; i < text1.length; i++) {
            var num10 = text1.charCodeAt(i);  //以10进制的整数返回 某个字符 的unicode编码
            var str2 = num10.toString(2);   //将10进制数字 转换成 2进制字符串

            if( total2str == "" ){
              total2str = str2;
            }else{
              total2str = total2str + " " + str2;
            }
        }
        oText2.value=total2str;
        // console.log("编码后:" + total2str);
        oBtn2.onclick=function(){
          var Md5=hex_md5(total2str);
          oText3.value=Md5;
        }

        oBtn3.onclick=function(){
          var goal = "";
          var arr = total2str.split(' ');
          for(var i=0; i < arr.length; i++){
            var str2 = arr[i];
            var num10 = parseInt(str2, 2); // 2进制字符串转换成 10进制的数字
            goal += String.fromCharCode(num10); // 将10进制的unicode编码, 转换成对应的unicode字符
          }
            // console.log('解码后:'+ goal );
            oText4.value=goal;
        }
        };
      };
  </script>
</body>
</html>